import { defineComponent, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import {
  ElDialog,
  ElButton,
  ElIcon,
  ElMessage,
  ElInput,
  ElSelect,
  ElOption,
  ElLink
} from 'element-plus'
import { EditPen, Plus } from '@element-plus/icons-vue'
import type { LoopSetPropsType } from './typings'
import AliIcon from '~/components/AliIocn'
import styles from './index.module.scss'

export default defineComponent({
  name: 'ConnectSet',
  props: ['visible', 'record'],
  emits: ['cancel'],
  setup(props: LoopSetPropsType, { emit }) {
    const store = useStore()
    const router = useRouter()
    const state = reactive<any>({
      list: [],
      sanMethod: [],
      loopOpt: [
        { name: 'K1', value: '1', check: false },
        { name: 'K2', value: '2', check: false },
        { name: 'K3', value: '3', check: false },
        { name: 'K4', value: '4', check: false },
        { name: 'K5', value: '5', check: false },
        { name: 'K6', value: '6', check: false },
        { name: 'K7', value: '7', check: false },
        { name: 'K8', value: '8', check: false },
        { name: 'K9', value: '9', check: false },
        { name: 'K10', value: '10', check: false },
        { name: 'K11', value: '11', check: false },
        { name: 'K12', value: '12', check: false },
        { name: 'K13', value: '13', check: false },
        { name: 'K14', value: '14', check: false },
        { name: 'K15', value: '15', check: false },
        { name: 'K16', value: '16', check: false }
      ],
      doNumOpt: [
        { name: 'DO1', value: 1, check: false },
        { name: 'DO2', value: 2, check: false },
        { name: 'DO3', value: 3, check: false },
        { name: 'DO4', value: 4, check: false },
        { name: 'DO5', value: 5, check: false },
        { name: 'DO6', value: 6, check: false },
        { name: 'DO7', value: 7, check: false },
        { name: 'DO8', value: 8, check: false },
        { name: 'DO9', value: 9, check: false },
        { name: 'DO10', value: 10, check: false },
        { name: 'DO11', value: 11, check: false },
        { name: 'DO12', value: 12, check: false },
        { name: 'DO13', value: 13, check: false },
        { name: 'DO14', value: 14, check: false },
        { name: 'DO15', value: 15, check: false },
        { name: 'DO16', value: 16, check: false }
      ],
      diNumOpt: [
        { name: 'DI1', value: 1, check: false },
        { name: 'DI2', value: 2, check: false },
        { name: 'DI3', value: 3, check: false },
        { name: 'DI4', value: 4, check: false },
        { name: 'DI5', value: 5, check: false },
        { name: 'DI6', value: 6, check: false },
        { name: 'DI7', value: 7, check: false },
        { name: 'DI8', value: 8, check: false },
        { name: 'DI9', value: 9, check: false },
        { name: 'DI10', value: 10, check: false },
        { name: 'DI11', value: 11, check: false },
        { name: 'DI12', value: 12, check: false },
        { name: 'DI13', value: 13, check: false },
        { name: 'DI14', value: 14, check: false },
        { name: 'DI15', value: 15, check: false },
        { name: 'DI16', value: 16, check: false }
      ],
      loopTypeOpt: [
        { name: '火零线', value: 0 },
        { name: '三相', value: 1 }
      ],
      lineNameOpt: [
        { name: 'A', value: 'a' },
        { name: 'B', value: 'b' },
        { name: 'C', value: 'c' }
      ]
    })
    // 关闭弹框事件回调
    const handleCloseModal = () => {
      emit('cancel')
    }
    //  列表处理
    const listCheck = () => {
      if (state.list.length > 0) {
        state.list.forEach((item: any) => {
          state.loopOpt.forEach((row: any) => {
            if (item.loopName === row.value) {
              row.check = true
            }
          })
          state.doNumOpt.forEach((row: any) => {
            if (item.doNum === row.value) {
              row.check = true
            }
          })
          state.diNumOpt.forEach((row: any) => {
            if (item.diNum === row.value) {
              row.check = true
            }
          })
        })
      }
    }
    //  判断选项禁止
    const onSelect = () => {
      state.loopOpt.forEach((row: any) => {
        row.check = false
      })
      state.doNumOpt.forEach((row: any) => {
        row.check = false
      })
      state.diNumOpt.forEach((row: any) => {
        row.check = false
      })
      listCheck()
    }
    //  回路类型选项
    const loopTypeChange = (item: any) => {
      if (item.loopType === 0) {
        item.line = [
          { lineName: 'hx', loopName: item.loopName },
          { lineName: 'lx', loopName: item.loopName }
        ]
      }
      if (item.loopType === 1) {
        item.line = [
          { lineName: 'a', loopName: item.loopName },
          { lineName: 'b', loopName: item.loopName },
          { lineName: 'c', loopName: item.loopName }
        ]
      }
    }
    // 提交表单
    const handleSubmitForm = async () => {
      const { id } = router.currentRoute.value.query
      const params = {
        id,
        list: state.list
      }
      const res = await store.dispatch('equipment/UpdateLoopPut', params)
      if (res?.code === 200) {
        ElMessage({ type: 'success', message: '操作成功' })
        handleCloseModal()
      }
    }

    onMounted(() => {
      state.list = props.record
      listCheck()
    })
    //  新增
    const add = () => {
      state.list.push({
        loopName: '',
        doNum: '',
        diNum: '',
        loopType: 0,
        line: [{ lineName: 'hx' }, { lineName: 'lx' }],
        leakageScale: '',
        currentScale: ''
      })
    }
    //  删除
    const del = (index: number) => {
      state.list = state.list.filter((item: any, key: number) => index !== key)
    }

    return () => {
      const { visible } = props
      return (
        <ElDialog
          title="回路参数"
          width={1200}
          modelValue={visible}
          closeOnClickModal={false} // 点遮罩层不关弹窗
          draggable // 可拖拽
          beforeClose={handleCloseModal}
          v-slots={{
            footer: () => (
              <>
                <ElButton type="primary" onClick={handleSubmitForm}>
                  <ElIcon>
                    <EditPen />
                  </ElIcon>
                  &nbsp; 确定
                </ElButton>
                <ElButton onClick={handleCloseModal}>取消</ElButton>
              </>
            )
          }}
        >
          <div style="margin-bottom: 20px;">
            <ElButton type="primary" onClick={add}>
              <ElIcon>
                <Plus />
              </ElIcon>
              &nbsp; 新增
            </ElButton>
          </div>
          <table class={styles['table-form']} cellspacing={0} cellpadding={0}>
            <tr>
              <td style="width: 80px;">回路名称</td>
              <td style="width: 80px;">关联DO</td>
              <td style="width: 80px;">接触器</td>
              <td>关联电表</td>
              <td style="width: 100px;">回路类型</td>
              <td>零火线</td>
              <td style="width: 80px;">电压相位</td>
              <td style="width: 100px;">漏电变比</td>
              <td style="width: 100px;">电流变比</td>
              <td>操作</td>
            </tr>
            {state.list.map((item: any, index: number) => (
              <tr>
                <td>
                  <ElSelect v-model={item.loopName} onChange={onSelect}>
                    {state.loopOpt.map((row: any) => (
                      <ElOption
                        key={row.value}
                        label={row.name}
                        value={row.value}
                        disabled={row.check}
                      />
                    ))}
                  </ElSelect>
                </td>
                <td>
                  <ElSelect v-model={item.doNum} onChange={onSelect}>
                    {state.doNumOpt.map((row: any) => (
                      <ElOption
                        key={row.value}
                        label={row.name}
                        value={row.value}
                        disabled={row.check}
                      />
                    ))}
                  </ElSelect>
                </td>
                <td>
                  <ElSelect v-model={item.diNum} onChange={onSelect}>
                    {state.diNumOpt.map((row: any) => (
                      <ElOption
                        key={row.value}
                        label={row.name}
                        value={row.value}
                        disabled={row.check}
                      />
                    ))}
                  </ElSelect>
                </td>
                <td>
                  <span>电表{item.loopName}</span>
                </td>
                <td>
                  <ElSelect v-model={item.loopType} onChange={() => loopTypeChange(item)}>
                    {state.loopTypeOpt?.map((row: any) => (
                      <ElOption key={row?.value} label={row?.name} value={row?.value} />
                    ))}
                  </ElSelect>
                </td>
                <td>
                  {item.loopType === 0 &&
                    item.line.map((row: any) => (
                      <div>{row.lineName === 'hx' ? '火线' : '零线'}</div>
                    ))}
                </td>
                <td>
                  {item.loopType === 1 &&
                    item.line.map((row: any) => (
                      <ElSelect v-model={row.lineName}>
                        {state.lineNameOpt?.map((el: any) => (
                          <ElOption key={el?.value} label={el?.name} value={el?.value} />
                        ))}
                      </ElSelect>
                    ))}
                </td>
                <td>
                  <ElInput v-model={item.leakageScale} />
                </td>
                <td>
                  <ElInput v-model={item.currentScale} />
                </td>
                <td>
                  <ElLink type="primary" onClick={() => del(index)}>
                    <AliIcon type="icon-shanchu" />
                    &nbsp; 删除
                  </ElLink>
                </td>
              </tr>
            ))}
          </table>
        </ElDialog>
      )
    }
  }
})
